<template>
  <transition
    v-if="!disabled"
    :enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
    :leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
  >
    <slot />
  </transition>
  <div v-else><slot /></div>
</template>

<script>
import { preset as animates } from '@/config/default/animate.config'

export default {
  name: 'PageToggleTransition',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    animate: {
      type: String,
      validator(value) {
        return animates.findIndex(item => item.name === value) !== -1
      },
      default: 'bounce'
    },
    direction: {
      type: String,
      validator(value) {
        return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
          'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
      },
      required: true
    },
    reverse: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    enterAnimate() {
      return this.activeClass(false)
    },
    leaveAnimate() {
      return this.activeClass(true)
    }
  },
  methods: {
    activeClass(isLeave) {
      const animate = animates.find(item => this.animate === item.name)
      if (animate === undefined) {
        return ''
      }
      let direction = ''
      if (this.direction === undefined) {
        direction = animate.directions[0]
      } else {
        direction = animate.directions.find(item => item === this.direction)
      }
      direction = (direction === undefined || direction === 'default') ? '' : direction
      if (direction !== '') {
        direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
        direction = direction[0].toUpperCase() + direction.substring(1)
      }
      const t = isLeave ? 'Out' : 'In'
      return animate.name + t + direction
    },
    reversePosition(direction, directions) {
      if (direction.length === 0 || direction === 'x' || direction === 'y') {
        return direction
      }
      let index = directions.indexOf(direction)
      index = (index % 2 === 1) ? index - 1 : index + 1
      return directions[index]
    }
  }
}
</script>

<style lang="less">
  .page-toggle-enter-active{
    position: absolute !important;
    animation-duration: 0.8s !important;
    width: calc(100%) !important;
  }
  .page-toggle-leave-active{
    position: absolute !important;
    animation-duration: 0.8s !important;
    width: calc(100%) !important;
  }
  .page-toggle-enter{
  }
  .page-toggle-leave-to{
  }
</style>
